@import '../global';

/**
 * @global {measurement} [$carousel-indicator-size=.5em] Size (width/height) of carousel indicator dots.
 *
 * @class Ext.Carousel.Indicator
 * @xtype carouselindicator
 */
$carousel-indicator-size: .5em !default;

/**
 * @global {measurement} [$carousel-indicator-spacing=.2em]
 * Amount of space between carousel indicator dots.
 *
 * @class Ext.Carousel.Indicator
 * @xtype carouselindicator
 */
$carousel-indicator-spacing: .2em !default;

/**
 * @global {measurement} [$carousel-track-size=1.5em] Size of the track the carousel indicator dots are in.
 *
 * @class Ext.Carousel.Indicator
 * @xtype carouselindicator
 */
$carousel-track-size: 1.5em !default;

/**
 * Includes basic carousel formatting.
 *
 * @class Ext.Carousel
 * @xtype carousel
 */
@mixin sencha-carousel {

  .x-carousel-body {
    overflow: hidden;
    position: relative;
  }

  .x-carousel-item {
    position: absolute;
    width: 100%;
    height: 100%;
    //-webkit-transform: translate3d(0px, 0px, 0px);

    // This declares the default state (non-moving) for carousel items
    @include transition(matrix3d, 0, ease-out);
  }

  .x-android .x-carousel-item {
    //-webkit-transform: translate(0px, 0px);
    @include transition(translate, 0, ease-out);
  }

  .x-carousel-indicator {
    position: absolute;
    z-index: 1;
    vertical-align: middle;
    text-align: center;
    @include display-box;
    @include box-pack(center);
    @include box-align(center);

    span {
      display: block;
      width: $carousel-indicator-size;
      height: $carousel-indicator-size;
      @if $include-border-radius { @include border-radius($carousel-indicator-size / 2); }
      margin: $carousel-indicator-spacing;
    }
  }

  .x-carousel-indicator-horizontal {
    height: $carousel-track-size;
    bottom: 0;
    left: 0;
    width: 100%;
    @include box-orient(horizontal);
  }

  .x-carousel-indicator-vertical {
    width: $carousel-track-size;
    height: 100%;
    right: 0;
    top: 0;
    @include box-orient(vertical);
  }

  $indicator-light: rgba(#fff, .1);
  $indicator-light-active: rgba(#fff, .3);
  $indicator-dark: rgba(#000, .1);
  $indicator-dark-active: rgba(#000, .3);

  @include sencha-carousel-indicator-ui('light', $indicator-light, 'flat', $indicator-light-active, 'flat');
  @include sencha-carousel-indicator-ui('dark', $indicator-dark, 'flat', $indicator-dark-active, 'flat');
}

/**
 * Creates a theme UI for carousel indicator components.
 *
 * @param {string} $ui-label The name of the UI being created.
 *   Can not included spaces or special punctuation (used in class names)
 * @param {color} $color Base color for the UI.
 * @param {string} $gradient Default gradient for the UI.
 * @param {color} $active-color Active color for the UI.
 * @param {string} $active-gradient Active gradient for the UI.
 * 
 * @class Ext.Carousel.Indicator
 * @xtype carouselindicator
 */
@mixin sencha-carousel-indicator-ui($ui-label, $color, $gradient, $active-color, $active-gradient) {
  .x-carousel-indicator-#{$ui-label} span {
    @include background-gradient($color, $gradient);

    &.x-carousel-indicator-active {
      @include background-gradient($active-color, $active-gradient)
    }
  }
}
